<template>
	<div class="container">
		<h2 style="text-align: center;margin-bottom: 30px;">{{ supplierName }}验收台账</h2>
		<a-row :gutter="20">
			<a-col :span="24">
				<a-table :pagination="false" :columns="columns" row-key="id" :data-source="formState">
					<template #expandedRowRender="{ record }">
						<a-table :columns="innerColumns" :data-source="record.materials" :pagination="false"></a-table>
					</template>
				</a-table>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { reactive, ref, computed, getCurrentInstance, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { usePagination } from "vue-request";
import { post } from "../utils/index.js";
import dayjs from "dayjs";
const supplierName = ref();
const route = useRoute();
const typeOptions = [
	{ value: 0, label: "请选择" },
	{ value: 1, label: "钢筋" },
	{ value: 2, label: "混凝土" },
	{ value: 3, label: "周转材料" },
	{ value: 4, label: "机械" },
	{ value: 5, label: "其它" },
	{ value: 6, label: "辅助材料" }
];
const formState = ref([]);
const columns = [
	{
		title: "序号",
		dataIndex: "supplier_id",
		key: "supplier_id",
		width: 100,
		align: "left",
		fixed: "left",
		customRender: ({ text, record, index, column }) => {
			return index + 1;
		}
	},
	{
		title: "项目名称",
		dataIndex: "project",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.name;
		}
	},
	{
		title: "验收类型",
		dataIndex: "ys_type",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return typeOptions.filter((item) => item.value === text)?.[0].label || '';
		}
	},
	{
		title: "验收单编号",
		dataIndex: "yanshou_code",
		sorter: false,
		width: 150,
		ellipsis: true,
	},
	{
		title: "验收时间",
		dataIndex: "yanshou_time",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return dayjs(text).format("YYYY-MM-DD HH:mm:ss");
		}
	},
	{
		title: "验收人",
		dataIndex: "opr",
		sorter: false,
		width: 150,
		align: "center"
	},
];
const innerColumns = [
	{
		title: "序号",
		dataIndex: "id",
		key: "supplier_id",
		width: 100,
		align: "left",
		fixed: "left",
		customRender: ({ text, record, index, column }) => {
			return index + 1;
		}
	},
	{
		title: "物资名称",
		dataIndex: "name",
		sorter: false,
		width: 150,
		ellipsis: true,
	},
	{
		title: "规格型号",
		dataIndex: "model",
		sorter: false,
		width: 150,
		ellipsis: true,
	},
	{
		title: "计量单位",
		dataIndex: "unit",
		sorter: false,
		width: 150,
		ellipsis: true,
	},
	{
		title: "采购数量",
		dataIndex: "SupplyOrderMaterial",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text.quantity || text.fangliang;
		}
	},
	{
		title: "验收数量",
		dataIndex: "SupplyOrderMaterial",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text.ys_quantity;
		}
	},
	{
		title: "发货单编号",
		dataIndex: "SupplyOrderMaterial",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return record.invoice_code + (text.position || '');
		}
	},
	{
		title: "使用部位",
		dataIndex: "gonghao",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return (text || '') + (record.SupplyOrderMaterial.position || '');
		}
	},
	{
		title: "备注",
		dataIndex: "SupplyOrderMaterial",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text.memo;
		}
	},
];
onMounted(() => {
	post("supplyOrder/bySupplier/info",
		{ ys_status: 2, supplier_id: route.params.id }).then(data => {
		supplierName.value = data[0].supplier.company_name;
		data.forEach((item) => {
			item.materials.map((i) => {
				i.invoice_code = item.code;
			})
		})
		formState.value = data;
	})
})

const router = useRouter();
</script>
<style scoped lang="scss">
.container {
  background: #fff;
  padding: 12px;

  :deep(.ant-table-cell) .ant-form-item {
    margin-bottom: 0;

    .ant-form-item-explain {
      position: absolute;
      bottom: -24px;
    }
  }

  :deep(.ant-form-item) {
    margin-bottom: 0;
  }
}
</style>
